@import '../colors'

paper-toolbar.landing-page
	background-color landing-color

.page-scroll
	margin-top 50px

header.public
	z-index 1
	height 80px
	position absolute
	top 0
	left 0
	right 0
	display flex
	align-items center
	padding-left 16px
	color white
	font-size 25px
	font-weight 100
	background-color landing-color-footer
	+below(620px)
		background-color landing-color

.landing

	.landing-logo-container
		width 100%
		justify-content center
		.landing-logo
			max-height 400px
			margin -80px
			max-width 100%

	h1
		margin-bottom 1rem
		font-weight 200
		font-size 3.5rem
		margin-top 0
		+below(450px)
			font-size 2.5rem

	h2
		margin-bottom 4rem

	position relative
	overflow hidden

	width 100%
	background-image url('/bg-small.jpeg')
	background-size cover
	background-position center

	color white

	+below(601px)
		> div
			min-height 90vh
			background rgba(0,0,0,0.4)
			.landing-content
				height 90vh
	+above(600px)
		height 100vh
		> div
			background rgba(0,0,0,0.4)
			position absolute
			top 0
			left 0
			right 0
			bottom 81px

		> footer
			position absolute
			bottom 0
			left 0
			right 0

	.landing-content
		padding 20px

		height 100%
		width 100%

		.input-field label
			color white
		.at-input>input:not(.valid)
			border-bottom 1px solid white
		.btn
			text-decoration none
			background-color landing-color
		a:not(.btn):not(.btn-flat)
			color white
			text-decoration underline

		> div
			width 100%
			position relative

		display flex
		flex-direction column
		justify-content center
		align-items center
		text-align center
		overflow-y auto

		.accounts-back-button
			position absolute
			left 0
			top 15px

		+above(620px)
			hr
				width 75%
			> div
				width 600px

.landing-links
	margin-top 25px
	> :not(:last-child)
		display inline-block
		+below(600px)
			display block
			margin-bottom 10px
